{% extends "base.html" %}
{% load i18n %}
{% block head-css-ext %}
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/layout.css" />
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery-ui.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/ui.datepicker.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/forms.css" media="screen" />
{% endblock %}

{% block head-js-ext %}  
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery-ui.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.ui.datepicker-es.js"></script>
    <!--[if IE]><script type="text/javascript" src="{{MEDIA_URL}}js/jquery.bgiframe.js"></script><![endif]-->
{% endblock %}

{% block head-js-embedded %}
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            var year = new Date().getFullYear();
            var depto = {{ depto }};
            var ciudad = {{ ciudad }};
	  
            $("input:submit", ".enviar").button();
	  
            $("#datepicker").datepicker({
                firstDay: 0,
                dateFormat: 'yy-mm-dd',
                yearRange: '1900' + ':' + year, 
                changeMonth: true,
                changeYear: true,
                showOn: 'button',
                buttonImage: '{{MEDIA_URL}}img/calendar.gif',
                buttonImageOnly: true,
                showButtonPanel: true,
                maxDate : new Date()
            });
	  
            $("select#departamento option[value="+ depto +"]").attr("selected", true);
	  
            $.getJSON("/ajax/buscarciudad/" + depto + "/", function(j){
                if (j.length == 0)
                {
                    var options = '<option value="">----------</option>';
                }
                else
                {
                    var options = '';                
                    for (var i = 0; i < j.length; i++)
                    {
                        options += '<option value="' + parseInt(j[i].pk) + '">' + j[i].fields['name'] + '</option>';
                    }
                }
                $("#ciudad").html(options);
                $("#ciudad option[value=" + ciudad + "]").attr("selected", true);
            });
	  
            $("select#departamento").change(function(){
                $.getJSON("/ajax/buscarciudad/" + $(this).val() + "/", function(j){
                    if (j.length == 0)
                    {
                        var options = '<option value="">----------</option>';
                    }
                    else
                    {
                        var options = '';                
                        for (var i = 0; i < j.length; i++)
                        {
                            options += '<option value="' + parseInt(j[i].pk) + '">' + j[i].fields['name'] + '</option>';
                        }
                    }
                    $("#ciudad").html(options);
                });
            });	  
        });
    </script>
{% endblock %}

{% block content-box1 %}
    <form method="post" action=".">{% csrf_token %}
        {% if form.non_field_errors %}
            <div class="error">{{ form.non_field_errors|join:", " }}</div>
            <br><br>
        {% endif %}	
        <table>
            <tr>
                <td><label for="id_nombre">Nombre:</label>{% if form.nombre.errors %} <div class="error">{{ form.nombre.errors|join:", " }}</div>{% endif %}</td>
                <td>{{ form.nombre }}</td>
            </tr>
            <tr>
                <td><label for="id_apellido">Apellido:</label>{% if form.apellido.errors %} <div class="error">{{ form.apellido.errors|join:", " }}</div>{% endif %}</td>
                <td>{{ form.apellido }}</td>
            </tr>  
            <tr>
                <td><label for="Departamento">Departamento:</label>{% if form.departamento.errors %} <div class="error">{{ form.departamento.errors|join:", " }}</div>{% endif %}</td>
                <td>{{ form.departamento }}</td>
            </tr>
            <tr>
                <td><label for="Ciudad">Ciudad:</label>{% if form.ciudad.errors %} <div class="error">{{ form.ciudad.errors|join:", " }}</div>{% endif %}</td>
                <td>{{ form.ciudad }}</td>
            </tr>
            <tr>
                <td><label for="id_telefono">Telefono:</label>{% if form.telefono.errors %} <div class="error">{{ form.telefono.errors|join:", " }}</div>{% endif %}</td>
                <td>{{ form.telefono }}</td>
            </tr>
            <tr>
                <td><label for="id_movil">Celular:</label>{% if form.movil.errors %} <div class="error">{{ form.movil.errors|join:", " }}</div>{% endif %}</td>
                <td>{{ form.movil }}</td>
            </tr>
            <tr>
                <td><label for="id_fecha_nacimiento">Fecha Nacimiento:</label>{% if form.fecha_nacimiento.errors %} <div class="error">{{ form.fecha_nacimiento.errors|join:", " }}</div>{% endif %}</td>
                <td>{{ form.fecha_nacimiento}}</td>
            </tr>    
         </table>
        <br>
        <div align="center" class="enviar" >
            <input type="submit" value="Editar Perfil" />
        </div>
    </form>
{% endblock %}